<template>
  <div
    class="section"
    :class="{
      'w-screen': !store.state.app.isCollapse,
      'w-screen-200': store.state.app.isCollapse,
    }"
  >
    <div
      class="p-3 m-3 bg-white rounded container-box"
      :class="{
        animate__animated: state.show,
        animate__slideInLeft: state.show,
      }"
    >
      <div class="mb-3">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, key) in state.matched"
            :key="key"
            :to="
              (key == 0 || item.meta.breadcrumb) &&
              key != state.matched.length - 1
                ? { path: item.path }
                : null
            "
          >
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { reactive, watchEffect } from "@vue/runtime-core";

const router = useRouter();
const store = useStore();
const state = reactive({
  matched: [],
  show: false,
});
watchEffect(() => {
  state.matched = router.currentRoute.value.matched;
  state.show = false;
  setTimeout(() => {
    state.show = true;
  }, 8);
});
</script>
<style>
.w-screen-200 {
  width: calc(100vw - 200px);
}
.container-box {
  min-height: calc(100vh - 4.5rem);
  max-height: calc(100vh - 4.5rem);
  min-width: 1px;
  overflow-y: auto;
  overflow-x: auto;
}
.section {
  min-height: calc(100vh - 3rem);
  background-color: rgba(238, 238, 238, 0.89);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
